<template>
  <div class="etc_detail">
    <header>
       <p><img src="../assets/img/left@2x.png"></p>
       <p>鲁AN357H</p>
       <p><span>换卡查询</span></p>
    </header>
    <div class="detail_list">
       <div class="timer_cnt">
       	  <p><time>2016年9月</time><span>（部分数据会延时）</span></p>
       	  <p><b>消费:</b><span>3456.56</span></p>
       </div>
        <div class="content_list">
        	<ul>
        		<li>
        			<div class="concreat_time">
        				<span>周六</span>
        				<span>09-13</span>
        			</div>
        			<div class="ico_list">
        				<img src="../assets/img/icon@2x.png" >
        			</div>
        			<div class="dress_local">
        				<span>-546.2</span>
        				<span>地点：济南西收费站</span>
        			</div>
        		</li>
        		<li>
        			<div class="concreat_time">
        				<span>周六</span>
        				<span>09-13</span>
        			</div>
        			<div class="ico_list">
        				<img src="../assets/img/icon@2x.png" >
        			</div>
        			<div class="dress_local">
        				<span>-546.2</span>
        				<span>地点：济南西收费站</span>
        			</div>
        		</li>
        		<li>
        			<div class="concreat_time">
        				<span>周六</span>
        				<span>09-13</span>
        			</div>
        			<div class="ico_list">
        				<img src="../assets/img/icon@2x.png" >
        			</div>
        			<div class="dress_local">
        				<span>-546.2</span>
        				<span>地点：济南西收费站</span>
        			</div>
        		</li>
        		<li>
        			<div class="concreat_time">
        				<span>周六</span>
        				<span>09-13</span>
        			</div>
        			<div class="ico_list">
        				<img src="../assets/img/icon@2x.png" >
        			</div>
        			<div class="dress_local">
        				<span>-546.2</span>
        				<span>地点：济南西收费站</span>
        			</div>
        		</li>
        	</ul>
        </div>
    </div>
    <div class="detail_list">
       <div class="timer_cnt">
       	  <p><time>2016年9月</time><span>（部分数据会延时）</span></p>
       	  <p><b>消费:</b><span>3456.56</span></p>
       </div>
        <div class="content_list">
        	<ul>
        		<li>
        			<div class="concreat_time">
        				<span>周六</span>
        				<span>09-13</span>
        			</div>
        			<div class="ico_list">
        				<img src="../assets/img/icon@2x.png" >
        			</div>
        			<div class="dress_local">
        				<span>-546.2</span>
        				<span>地点：济南西收费站</span>
        			</div>
        		</li>
        		<li>
        			<div class="concreat_time">
        				<span>周六</span>
        				<span>09-13</span>
        			</div>
        			<div class="ico_list">
        				<img src="../assets/img/icon@2x.png" >
        			</div>
        			<div class="dress_local">
        				<span>-546.2</span>
        				<span>地点：济南西收费站</span>
        			</div>
        		</li>
        		<li>
        			<div class="concreat_time">
        				<span>周六</span>
        				<span>09-13</span>
        			</div>
        			<div class="ico_list">
        				<img src="../assets/img/icon@2x.png" >
        			</div>
        			<div class="dress_local">
        				<span>-546.2</span>
        				<span>地点：济南西收费站</span>
        			</div>
        		</li>
        		<li>
        			<div class="concreat_time">
        				<span>周六</span>
        				<span>09-13</span>
        			</div>
        			<div class="ico_list">
        				<img src="../assets/img/icon@2x.png" >
        			</div>
        			<div class="dress_local">
        				<span>-546.2</span>
        				<span>地点：济南西收费站</span>
        			</div>
        		</li>
        	</ul>
        </div>
    </div>
    
   
  </div>
</template>

<script>
export default {
  name: 'mine',
  data () {
    return {
      msg: 'Welcome to mine.vue'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang = 'less'>
@import '../assets/less/style.less';
.etc_detail {
  header {
     .px2rem(height,88);
      background: #21d094;
      display: flex;
      align-items: center;
      justify-content: space-between;
      /* .border(1,solid,#000); */
      p:nth-child(1) {
        flex: 1;
        .font(30,#fff);
        .padding-left(35);
        img {
          .px2rem(height,39);
          .px2rem(width,39);
        }
      }
      p:nth-child(2) {
        flex: 2;
        text-align: center;
        .font(38,#fff);
      }
      p:nth-child(3) {
        flex: 1;
        /* text-align: right; */
        display: flex;
        justify-content: flex-end;
        span {
        	.margin-right(30);
        	display: block;
	        .font(26,#4aba80);
	        .padding(12,12,12,12);
	        background: #fff;
	        .border-radius(8);
        }
      }
    }
    .detail_list {
    	width: 92%;
    	margin: auto;
    	.timer_cnt {
    		.px2rem(height,108);
    		display: flex;
    		justify-content: space-between;
    		align-items: center;
    		p:nth-child(1){
				time {
					.font(28,#636363);
				}
				span {
					.font(24,#808080);
				}
    		}
    		p:nth-child(2){
				b {
					.font(28,#636363);
				}
				span {
					.font(30,#fa8e01);
					font-weight: bold;
				}
    		}
    	}
    	.content_list {
    		ul {
    			li {
    				.px2rem(height,120);
    				background: #f3f3f3;
    				display: flex;
    				align-items: center;
    				.border-bottom(1,solid,#c2c2c2);
    				.concreat_time {
    					.font(26,#737373);
						display: flex;
						flex-direction: column;
						.padding-left(30);
						span:nth-child(2){
							.padding-top(18);
						}
    				}
    				.ico_list {
    					.padding-left(10);
						img {
							.px2rem(height,60);
							.px2rem(height,60);
						}
    				}
    				.dress_local {
    					.padding-left(60);
						display: flex;
						flex-direction: column;
						span:nth-child(1) {
							.font(24,#4aba80);
							font-weight: bold;
						}
						span:nth-child(2) {
							.font(24,#9c9c9c);
							.padding-top(18);
						}
    				}
    			}
    		}
    	}
     }   
  }


</style>
